<template>
	<view
		class="tabbar"
		:style="{
			'padding-bottom': paddingBottomHeight + 'rpx'
		}">
		<view
			class="tabbar-item"
			v-for="(item, index) in list"
			:key="index"
			@click="tabbarChange(item.path,index)">
			<image
				class="item-img"
				:src="item.icon_a"
				v-if="current == index"
				mode="aspectFit" />
			<image
				class="item-img"
				:src="item.icon"
				v-else
				mode="aspectFit" />
			<view
				class="item-name"
				:class="{
					tabbarActive: current == index
				}"
				v-if="item.text">{{ item.text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: Number,
				default: 1
			},
			bid: {
				type: [String, Number]
			}
		},
		data() {
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				list: [
					{
						path: "/pages/tab/home",
						icon: "/static/tab/tab-home.png",
						icon_a: "/static/tab/home-act.png",
						text: "首页"
					},
					{
						path: "/pages/goods/shop-mall",
						icon: "/static/tab/tab-order.png",
						icon_a: "/static/tab/order-act.png",
						text: "逆伶商城"
					},
					{
						path: "/pages/goods/integral-mall",
						icon: "/static/tab/tab-midou.png",
						icon_a: "/static/tab/tab-midou-act.png",
						text: "泌豆商城"
					}
					// {
					// 	path: "/business/pages/business_tab/classify",
					// 	icon: "https://wx.2024csnl.com/static/tab/tab-classify.png",
					// 	icon_a: "https://wx.2024csnl.com/static/tab/classify-act.png",
					// 	text: "分类"
					// },
					// {
					// 	path: "/business/pages/business_tab/shopcar",
					// 	//path:'/pages/tab/shopcar',
					// 	icon: "https://wx.2024csnl.com/static/tab/tab-shopcar.png",
					// 	icon_a: "https://wx.2024csnl.com/static/tab/shopcar-act.png",
					// 	text: "购物车"
					// },
					// {
					// 	path: "/business/pages/business_tab/mine",
					// 	path: '/pages/tab/mine',
					// 	icon: "https://wx.2024csnl.com/static/tab/tab-mine.png",
					// 	icon_a: "https://wx.2024csnl.com/static/tab/mine-act.png",
					// 	text: "我的"
					// }
				]
			};
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					});
				}
			});
		},
		methods: {
			tabbarChange(url, i) {
				console.log(url, "url", i, `${url}?bid=${this.bid}`)
				uni.switchTab({
					url,
					fail() {
						uni.navigateTo({
							url, // `${url}?bid=${this.bid}`,
							animationType: 'none',
						})
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.tabbarActive {
		color: #324c37 !important;
	}

	.tabbar {
		z-index: 99999;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 90rpx;
		background-color: #ffffff;
		box-shadow: 0 10rpx 15rpx 10rpx #d3d3d3;

		.tabbar-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 90rpx;

			.item-img {
				margin-bottom: 4rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.item-name {
				font-size: 24rpx;
				color: #555;
			}
		}
	}
</style>